<template>
  <div>
    <div class="biaoti2">平台管理员-利润统计</div>
    <div class="biaoti">总利润：{{profit}}</div>
  </div>
  <div class="changping" id="main1" :style="{ width: '1500px', height: '550px' }"></div>

  <div class="changping" id="main2" :style="{ width: '1500px', height: '550px' }"></div>
  
</template>

<script setup>
import * as echarts from "echarts";
import { onMounted, ref, reactive } from "vue";
import { get, post } from "@/common";
import { useRouter, useRoute } from "vue-router";
const profit = ref(0);
onMounted(() => {
  // 需要获取到element,所以是onMounted的Hook
  const router = useRouter();
  const route = useRoute();

  const cinemaList = ref([]);
  const cinemaprofit = ref({});

  let cnm_num = 0;
  

  const getCinemaProfitList = () => {
    get("/search/profit/profitcinema", { cnm_num: cnm_num }).then((res) => {
      cinemaprofit.value = res.data;

      let ldata = new Array();

      for (var i = 0; i < cinemaList.value.length; i++) {
        ldata.push(cinemaList.value[i]);
      }

      let datay = [];

      for (let i = 0; i < cinemaList.value.length; i++) {
        datay.push(cinemaList.value[i]);
      }

      let datas = [];

      for (let i = 0; i < cinemaprofit.value.length; i++) {
        var item = {
          value: cinemaprofit.value[i],
          name: cinemaList.value[i],
        };
        datas.push(item);
      }
      console.log(datas);

      // 绘制图表
      myChart.setOption({
        title: {
          text: "各个电影院收益", //主标题
          subtext: "", //副标题
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          bottom: "bottom",
          data: datay,
        },
        series: [
          {
            name: "收益",
            type: "pie",
            radius: "55%",
            data: datas,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
      window.onresize = function () {
        // 自适应大小
        myChart.resize();
      };
      getProfit();
      console.log(profit);
    });
  };

  const getCinemaList = () => {
    get("/info/cinema/cinema-list-name").then((res) => {
      cinemaList.value = res.data;
      cnm_num = cinemaList.value.length;

      getCinemaProfitList();
    });
  };

  const getProfit = () => {
    for (let i = 0; i < cinemaprofit.value.length; i++) {
      profit.value = profit.value + cinemaprofit.value[i];
    }

    console.log("profit==============>", profit.value);
  };

  let myChart = echarts.init(document.getElementById("main1"));

  getCinemaList();
});

const movieList = ref([]);
const movieprofit = ref({});

let mov_num = 0;
let mprofit = 0;

const getMovieProfitList = () => {
  get("/search/profit/profitmovie", { mov_num: mov_num }).then((res) => {
    movieprofit.value = res.data;

    let mldata = new Array();

    for (var i = 0; i < movieList.value.length; i++) {
      mldata.push(movieList.value[i]);
    }

    let mdatay = [];

    for (let i = 0; i < movieList.value.length; i++) {
      mdatay.push(movieList.value[i]);
    }

    let mdatas = [];

    for (let i = 0; i < movieprofit.value.length; i++) {
      var item = {
        value: movieprofit.value[i],
        name: movieList.value[i],
      };
      mdatas.push(item);
    }
    console.log(mdatas);

    let myChart2 = echarts.init(document.getElementById("main2"));
    // 绘制图表
    myChart2.setOption({
      title: {
        text: "各个电影收益", //主标题
        subtext: "", //副标题
      },
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b} : {c} ({d}%)",
      },
      legend: {
        orient: "vertical",
        bottom: "bottom",
        data: mdatay,
      },
      series: [
        {
          name: "收益",
          type: "pie",
          radius: "55%",
          data: mdatas,
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
    });
    window.onresize = function () {
      // 自适应大小
      myChart2.resize();
    };
    getmProfit();
    console.log(mprofit);
  });
};

const getMovieList = () => {
  get("/info/movie/movie-list-name").then((res) => {
    movieList.value = res.data;
    mov_num = movieList.value.length;

    getMovieProfitList();
  });
};

const getmProfit = () => {
  for (let i = 0; i < movieprofit.value.length; i++) {
    mprofit = mprofit + movieprofit.value[i];
  }
};

getMovieList();
</script>

<style>
.dafen{
  float: left;
  margin-top:36px;
  height:65px;
  border-style: solid;
  border-width: 0px 0px 0px 4px;
  border-color: #1890ff;
  padding: 4px;
}
.biaoti{
  font-size: 22px;
  color: rgba(0, 0, 0, 0.80);
  margin-left: 50px;
  margin-bottom: 15px;
  width: 25%;
  border-style: solid;
  border-width: 0px 0px 0px 4px;
  border-color: rgba(24, 144, 255, 0.497);
}
.biaoti2{
  font-size: 30px;
  color: rgba(0, 0, 0, 0.80);
  margin-left: 30px;
  margin-bottom: 15px;
  width: 25%;
  border-style: solid;
  border-width: 0px 0px 0px 4px;
  border-color: rgba(24, 144, 255, 0.497);
}
.duanping{
  border-style: solid;
  border-width: 1px 4px 4px 0px;
  border-color: #fff;
  width: 300px;
  height:150px;
  display: inline-block;
  background-color: rgba(105, 105, 105, 0.057);
  padding: 10px;
}
.changping{
  border-style: solid;
  border-width: 2px 4px 4px 2px;
  border-color: #fff;
  height:auto;
  background-color: rgba(105, 105, 105, 0.03);
  margin: auto;
  border: 4px solid rgba(105, 105, 105, 0.03);
}
.ant-btn-primary {
    color: #fff;
    background-color: #1890ff;
    border-color: #1890ff;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.12);
    -webkit-box-shadow: 0 2px 0 rgba(0,0,0,0.045);
    box-shadow: 0 2px 0 rgba(0,0,0,0.045);
    
}
.ant-btn-red {
    color: #fff;
    background-color: #1890ff;
    border-color: #1890ff;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.12);
    -webkit-box-shadow: 0 2px 0 rgba(0,0,0,0.045);
    box-shadow: 0 2px 0 rgba(0,0,0,0.045);
}
</style>